<template>
    <div class="publish-container">
      <a-card title="发布新作业">
        <a-form :model="form" @finish="handleSubmit" layout="vertical">
          <a-form-item label="选择用户" name="courseId" :rules="[{ required: true, message: '请选择课程' }]">
            <a-select v-model:value="form.courseId" :loading="loadingCourses">
              <a-select-option v-for="course in progressCourses" :key="course.id" :value="course.id">
                {{ course.title }} ({{ course.studentUsername }})
              </a-select-option>
            </a-select>
          </a-form-item>
  
          <a-form-item label="作业标题" name="title" :rules="[{ required: true, message: '请输入标题' }]">
            <a-input v-model:value="form.title" />
          </a-form-item>
  
          <a-form-item label="作业描述" name="description" :rules="[{ required: true, message: '请输入描述' }]">
            <a-textarea v-model:value="form.description" :rows="4" />
          </a-form-item>
  
          <a-form-item label="截止时间" name="deadline" :rules="[{ required: true, message: '请选择截止时间' }]">
            <a-date-picker
              v-model:value="form.deadline"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-item>
  
          <a-form-item label="附件上传">
            <a-upload
              v-model:file-list="fileList"
              :before-upload="beforeUpload"
              :max-count="1"
            >
              <a-button>
                <upload-outlined /> 选择文件
              </a-button>
            </a-upload>
          </a-form-item>
  
          <a-form-item>
            <a-button  type="primary" html-type="submit" :loading="submitting">发布作业</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { listTeacherCoursesApi } from '/@/api/course';
  import { publishHomeworkApi } from '/@/api/homework';
  import type { Course, CourseStatus } from '/@/api/course';
  
  interface FormState {
    courseId?: number;
    title: string;
    description: string;
    deadline: string;
  }
  
  const form = ref<FormState>({
    title: '',
    description: '',
    deadline: ''
  });
  const fileList = ref<any[]>([]);
  const submitting = ref(false);
  const loadingCourses = ref(false);
  const progressCourses = ref<Course[]>([]);
  
  onMounted(async () => {
    loadingCourses.value = true;
    try {
      const courses = await listTeacherCoursesApi('PROGRESS');
      progressCourses.value = courses;
    } catch (error) {
      message.error('加载课程失败');
    } finally {
      loadingCourses.value = false;
    }
  });
  
  const beforeUpload = (file: File) => {
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.error('文件大小不能超过10MB');
      return false;
    }
    fileList.value = [file];
    return false;
  };
  
  const handleSubmit = async () => {
    submitting.value = true;
    try {
      await publishHomeworkApi({
        ...form.value,
        courseId: form.value.courseId!,
        file: fileList.value[0]?.originFileObj
      });
      message.success('作业发布成功');
      form.value = { title: '', description: '', deadline: '' };
      fileList.value = [];
    } catch (error) {
      message.error('发布失败');
    } finally {
      submitting.value = false;
    }
  };
  </script>
  
  <style scoped>
  .publish-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
  }
  
  /* 卡片样式优化 */
  :deep(.ant-card) {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    .ant-card-head {
      background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      padding: 0 24px;
      
      .ant-card-head-title {
        color: #2c3e50;
        font-weight: 600;
        padding: 20px 0;
        font-size: 18px;
      }
    }
    
    .ant-card-body {
      padding: 24px;
    }
  }
  
  /* 表单元素优化 */
  :deep(.ant-form-item) {
    margin-bottom: 20px;
  
    .ant-form-item-label {
      label {
        font-weight: 500;
        color: #495057;
      }
    }
  
    .ant-input,
    .ant-input-textarea,
    .ant-picker {
      border-radius: 6px;
      border-color: #ced4da;
      transition: all 0.3s;
  
      &:hover,
      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      }
    }
  
    .ant-picker {
      width: 100%;
    }
  }
  
  /* 上传组件美化 */
  :deep(.ant-upload) {
    .ant-btn {
      background: #f8f9fa;
      border-color: #ced4da;
      color: #495057;
      border-radius: 6px;
      padding: 6px 16px;
      min-width: 710px;
      
      &:hover {
        background: #e9ecef;
        border-color: #adb5bd;
      }
      
      .anticon {
        margin-right: 8px;
      }
    }
  }
  
  /* 提交按钮优化 */
  :deep(.ant-btn-primary) {
    background: #409eff;
    border-color: #409eff;
    border-radius: 6px;
    padding: 8px 24px;
    height: auto;
    transition: all 0.3s;
    
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
    }
    
    &:active {
      background: #3a8ee6;
    }
  }
  
  /* 错误提示优化 */
  :deep(.ant-form-item-explain-error) {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
  }

  :deep(.ant-form-item:last-child) {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* 可选：调整按钮宽度 */
:deep(.ant-btn-primary) {
  min-width: 710px;
  padding: 10px 24px;
  font-size: 14px;
}
  </style>